<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            width: 100px;
            height: 50px;
            border: 1px solid green;
        }
    </style>
</head>
<body>
<button id="btn">提交</button>
<div id="d1"></div>
</body>
<script>
    document.querySelector('#btn').addEventListener('click', function () {
        let xhr = new XMLHttpRequest();
        xhr.open('post', 'http://127.0.0.1:8000/serve')

        // 设置请求头 表单
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        // 自定义请求头
        xhr.setRequestHeader('name','yuu')
        let param = {
            a: 1,
            b: 2
        }
        xhr.send(JSON.stringify(param))
        xhr.onreadystatechange = function () {
            // readyState 0初始化，1 open，2 send，3 服务器返回部分数据，4服务器返回所有数据
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    console.log(xhr)
                    document.querySelector('#d1').innerHTML = xhr.responseText
                }
            }
        }
    })
</script>
</html>